<template>
    <div class="print">
        <div class="title">发货单</div>
        <div class="info">
            <div class="row">
                <div>收货人：{{ orderDetail.consignee }}</div>
                <div>电话：{{ orderDetail.consignee }}</div>
                <div>地址：{{ orderDetail.consigneeAddress }}</div>
            </div>
            <div class="row">
                <div>订单编号：{{ orderDetail.orderNo }}</div>
                <div>下单时间：{{ orderDetail.createTime }}</div>
            </div>
        </div>

        <el-table
            style="width: 100%"
            :data="orderDetail.goodsList"
            border
            show-summary
            :summary-method="getSummaries"
            stripe
        >
            <el-table-column label="序号" width="60">
                <template #default="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column prop="goodsName" label="商品名称"/>
            <el-table-column prop="specKey" label="规格"/>
            <el-table-column prop="goodsPrice" label="单价"/>
            <el-table-column prop="goodsNum" label="数量"/>
            <el-table-column prop="totalMoney" label="金额"/>
        </el-table>
        <div class="money">
            总金额：<span>¥{{ orderDetail.totalMoney }}</span></div>
    </div>
</template>

<script>
import {OrderApi} from '@/api/mall/order'

export default {
    name: 'MallOrderPrint',
    components: {},
    data() {
        return {
            orderDetail: {}
        }
    },
    created() {
        const orderNo = this.$router.currentRoute.query.orderNo
        OrderApi.getOrderDetailByOrderNo(orderNo).then((response) => {
            response.goodsList.forEach(item => {
                item.goodsPrice = item.goodsPrice / 100
                item.totalMoney = item.totalMoney / 100
            })

            response.totalMoney = response.totalMoney / 100

            this.orderDetail = response
        })
    },

    methods: {
        getSummaries() {
            return ['合计', '', '', '', this.orderDetail.totalGoodsNum, this.orderDetail.totalMoney]
        }
    }
}
</script>

<style>
body {
    background: #FFF;
}

.print {
    max-width: 1000px;
    margin: 0 auto;
}

.print .title {
    font-size: 24px;
    text-align: center;
    padding: 50px 0;
}

.print .info {
    line-height: 30px;
    margin-bottom: 20px;
    display: flex;
}

.print .info .row {
    flex: 1;
}

.print .money {
    line-height: 30px;
    margin-top: 20px;
}

.print .money span {
    font-size: 16px;
    font-weight: bold;
    color: #F00;
}
</style>
